<template>
  <div class="container-box">
    <!-- 头部 -->
    <ListTitle></ListTitle>
    <!-- 标签导航 -->
    <van-tabs v-model="active">
      <van-tab
        v-for="item in tabData"
        :key="item.id"
        :title="item.name"
      ></van-tab>
    </van-tabs>
    <!-- 轮播 -->
    <Banner v-if="active == 0"></Banner>
    <!-- 品牌馆 -->
    <Brand></Brand>
    <!-- 四宫格 -->
    <van-grid
      :border="false"
      :column-num="2"
      v-if="active == 0"
      class="midBanner"
    >
      <van-grid-item v-for="item in midShowData" :key="item.id">
        <van-image :src="item.image_path" />
      </van-grid-item>
    </van-grid>
    <!-- 列表数据 -->
    <div v-if="active == 0" class="title">猜你喜欢</div>
    <List></List>
    <div class="listBottom">
      <p>已无更多内容...</p>
    </div>
  </div>
</template>

<script>
import ListTitle from '@/layout/components/ListTitle'
import Banner from './components/Banner'
import Brand from './components/Brand'
import List from './components/List'
export default {
  data() {
    return {
      active: 0,
      // 头部导航数据
      tabData: [
        { id: 1, name: '蛋糕专题' },
        { id: 2, name: '鲜奶蛋糕' },
        { id: 3, name: '水果蛋糕' },
        { id: 4, name: '冰激凌蛋糕' },
        { id: 5, name: '慕斯蛋糕' },
        { id: 6, name: '芝士蛋糕' },
        { id: 7, name: '无糖蛋糕' },
        { id: 8, name: '千层蛋糕' },
        { id: 9, name: '数码蛋糕' },
        { id: 10, name: '全部商品' }
      ],
      midShowData: [
        {
          id: 1,
          image_path: 'https://img.dangaoss.com/public/p/84/25/1370838.png'
        },
        {
          id: 2,
          image_path: 'https://img.dangaoss.com/public/p/85/26/1370839.png'
        },
        {
          id: 3,
          image_path: 'https://img.dangaoss.com/public/p/86/27/1370840.png'
        },
        {
          id: 4,
          image_path: 'https://img.dangaoss.com/public/p/87/28/1370841.png'
        }
      ]
    }
  },
  components: {
    ListTitle,
    Banner,
    Brand,
    List
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.container-box {
  background-color: #f5f5f5;
  padding-top: 86px;

  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .van-tabs {
    position: fixed;
    top: 46px;
    left: 0;
    z-index: 20;
  }
  /deep/.van-tab--active {
    color: #ff3f4f;
  }
  /deep/.van-tabs__line {
    background-color: #ff3f4f;
    height: 2px;
  }
  /deep/.van-tabs--line .van-tabs__wrap {
    height: 40px;
  }

  /deep/.van-grid-item > div::after {
    display: none;
  }

  .midBanner {
    margin-top: 0.15rem;
    padding: 0.2rem 0 0.2rem 0.2rem;
    background: #fff;
    .van-grid-item {
      padding: 0 0.2rem 0.2rem 0;
      border-radius: 0.1rem;
      /deep/.van-grid-item__content {
        padding: 0;
      }
      /deep/.van-image__img {
        border-radius: 0.1rem;
      }
    }
  }
  .title {
    padding: 0.24rem 0.3rem;
    font-size: 0.3rem;
    background: #fff;
    margin-top: 0.15rem;
  }
  .listBottom {
    padding: 0.2rem;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    font-size: 0.28rem;
    color: #6d6d6d;
    p {
      border: 1px solid #eaeaea;
      background-color: #fefefe;
      line-height: 0.56rem;
      height: 0.56rem;
    }
  }
}
</style>
